<template>
	<div class="content">
		<!-- 面包屑导航 -->
		<Crumbs v-if="show == 3 || show == 11" :item="crumbsItem" @crumbsClick="crumbsClick"></Crumbs>
		<div class="tabs" v-if="show == 1 || show == 2">
			<div :class="{ active: show == 1 }" @click="show = 1">考试任务</div>
			<div :class="{ active: show == 2 }" @click="show = 2">历史考试</div>
			<el-select v-if="show == 2" v-model="selectVal" placeholder="请选择" @change="selectTm">
				<el-option v-for="item in semester" :key="item.Id" :label="item.Name" :value="item.Id" />
			</el-select>
		</div>
		<!-- 考试任务 -->
		<paperItem :list="mockExam" title="examname" :modeFlase="modeFlase" v-if="show == 1" @paperClick="skipResult" @startAnswer="clickStart"></paperItem>
		<!-- 历史考试 -->
		<paperItem :list="onlineExam" difTime="carrypapertime" :modeFlase="modeFlase" v-if="show == 2" @paperClick="skipResult"></paperItem>
		<!-- 成绩页面 -->
		<ScoreModule v-if="show == 3" :data="transcript" :againShow="false" @againBtn="clickStart" @viewWrong="viewWrong"></ScoreModule>
		<Empty v-if="(show == 1 && mockExam.length == 0) || (show == 2 && onlineExam.length == 0)" text="暂无考试"></Empty>
		<!-- 分页 -->
		<PgCom v-if="(total > pageSize && show == 1) || (total > pageSize && show == 2)" :total="total" :pageNo="pageNo" :pageSize="pageSize" @pageNoChange="pageNoChange"></PgCom>
		<!-- Question题目列表     CountVO答题卡数据  isRecitation是否背题模式  isCorrecting 是否批改题目-->
		<answer
			ref="answer"
			v-if="show == 11"
			@sumitSucess="sumitSucess"
			:CorrectCount="correctCount"
			:ErrorCount="errorCount"
			:Question="Question"
			:CountVO="CountVO"
			:isRecitation="isRecitation"
			:isCorrecting="isCorrecting"
			:Paper="Paper"
			:Formalexam="Formalexam"
			:topicNumber="Paper.number"
			updateHis="updateExamHistory"
		></answer>
	</div>
</template>

<script>
import exam from '../../../mixins/exam.js';
export default {
	mixins: [exam],
	data() {
		return {
			// flag: 1,
			crumbsItem: [{ name: '在线考试', url: 1 }], //面包屑导航
			show: 1, //展示
			pageNo: 1, //页码
			pageSize: 6, //每页条数
			total: 0, //总数
			paperPages: 0, //页数
			mockExam: [], //考试任务
			onlineExam: [], //历史任务
			semester: [{ Name: '本学期', Id: 1 }, { Name: '过往学期', Id: 2 }],
			selectVal: 1, //选中的值
			transcript: {},
			CountVO: {}, //题卡
			Question: [], //题目
			correctCount: 0, //正确数量
			errorCount: 0, //错误数量
			Paper: {}, //传递试卷信息
			isRecitation: false, //是否背题模式
			isCorrecting: false, //是否批改题目
			examname11: '', //从考试进入成绩单考试名字
			tabNam: '', //从考试进入成绩单导航路径
			Formalexam: false ,//是否考试模式
			modeFlase:false,//进入考试提示
			// againShow: true //成绩单再考一次显示
		};
	},
	created() {
		this.mockShow();
	},
	watch: {
		show() {
			setTimeout(()=>{
				if (this.show == 1) {
					this.mockShow();
				} else if (this.show == 2) {
					this.historyExam();
				}
			},500)
		}
	},
	mounted() {
		window.addEventListener('beforeunload', e => {
			if (this.refresh.clickDis) {
			this.beforeunloadHandler(e);}
		});
	},
	destroyed() {
		window.addEventListener('beforeunload', e => {
			if (this.refresh.clickDis) {
			this.beforeunloadHandler(e);}
		});
	},
	methods: {
		beforeunloadHandler(e) {
			//刷新提交更新
			e = e || window.event;
			if (this.show == 11) {
				if (e) {
					e.returnValue = '正在更新数据';
				}
				this.$refs.answer.updateHistoryHander('updateExamHistory');
				return;
			}
		},
		crumbsClick(type) {
			//导航切换事件
			this.show = type;
			this.pageNo = 1;
			if (type == 1) {
				this.crumbsInit();
			}
		},
		crumbsInit() {
			// 导航默认
			this.crumbsItem = [{ name: '在线考试', url: 1 }];
		},
		setCrumbs(name, url) {
			this.crumbsInit();
			let navLi = [];
			if (this.show == 1) {
				navLi = [{ name: '考试任务', url: 1 }, { name: name, url: url }];
			} else if (this.show == 2) {
				navLi = [{ name: '历史考试', url: 2 }, { name: name, url: url }];
			} else if (this.show == 11) {
				navLi = [{ name: '考试任务', url: 1 }, { name: name, url: url }];
			}
			this.crumbsItem = this.crumbsItem.concat(navLi);
		},
		navClick(type) {
			// 切换
			this.show = type;
			// this.setCrumbs(type==1?'考试任务':'历史考试', type)
			this.pageNo = 1;
			if (type == 2) {
				this.historyExam();
			} else {
				this.mockShow();
			}
		},
		selectTm(val) {
			// 历史选择
			this.selectVal = val;
			this.pageNo = 1;
			this.historyExam();
		},
		pageNoChange(val) {
			//页数选择
			this.pageNo = val;
			if (this.show == 2) {
				this.historyExam();
			} else {
				this.mockShow();
			}
		},
		//获取模拟考试列表
		mockShow() {
			this.axios
				.post('/web/student/exam/examTaskList', {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					type: 3
				})
				.then(res => {
					this.mockExam = res.list;
					this.total = res.total;
					this.paperPages = res.pages;
				});
		},
		historyExam() {
			//历史任务
			this.axios
				.post('/web/student/exam/historyExam', {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					type: this.selectVal
				})
				.then(res => {
					this.onlineExam = res.list;
					this.total = res.total;
					this.paperPages = res.pages;
				});
		},
		skipResult(e) {
			if (this.show != 1) {
				this.Paper = e;
				this.setCrumbs(this.Paper.examname, 3);
				this.show = 3;
				let upid = e.upid;
				this.axios
					.get('/web/student/home/getTranscript', {
						params: {
							upid: upid
						}
					})
					.then(res => {
						this.transcript = res;
					});
			}
		},
		//面包屑导航
		crumbClick(type) {
			this.show = type;
		},
		sumitSucess(e) {
			//交卷成功
			this.Paper.status = 2;
			this.Paper.upid = e;
			this.Paper.examname = this.examname11;
			this.skipResult(this.Paper);
		},
		clickStart(e, paper) {
			this.Paper = paper;
			const pageData = {
				paperid: paper.paperid,
				ueid: paper.ueid,
				examid: paper.examid
			};
			this.modeFlase=true;
			let examname = e.examname ? e.examname : this.Paper.examname;
			this.examname11 = examname;
			this.setCrumbs(examname, 11);
			this.isRecitation = false; //不是背题模式
			this.isCorrecting = false;
			this.Formalexam = true;
			// 开始答题
			this.startAnswer(pageData);
		},
		viewWrong(e) {
			const pageData = {
				paperid: this.Paper.paperid,
				upid: this.Paper.upid,
				isCorrect: e
			};
			// 查看错题
			this.isRecitation = true;
			this.isCorrecting = true;
			this.autoCorrecting = true;
			this.Formalexam = false;
			this.viewWrongTopic(pageData);
		}
	}
};
</script>

<style scoped>
.tabs {
	position: relative;
	margin-top: 40px;
}
.el-select {
	position: absolute;
	right: 0;
}
/deep/.el-input__inner {
	border-radius: 50px;
	width: 106px;
	height: 34px;
	font-size: 14px !important;
	color: #a8aaad;
}
.finalQues_a span:last-child {
	color: #475266;
	font-weight: 600;
}
/deep/.finalQues_a span:nth-child(2) {
	display: none;
}
</style>
